<template>
  <view class="tabBar">
    <view v-for="(item,index) in tabBar" :key="index" class="tabbar_item" :class="{'active':item.name == componentsName}"
          @click="navTo(item.name)">
      <image v-if="item.name == componentsName" :src="item.selectedIconPath" mode=""></image>
      <image v-else :src="item.iconPath" mode=""></image>
      <view class="text">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    componentsName: {
      type: String,
      default: 'adminIndex'
    }
  },
  data() {
    return {
      // tabbar list
      tabBar: [],
    };
  },
  created() {
    //隐藏原生tabBar
    uni.hideTabBar({})
    //获取tabBar
    this.tabBar = uni.getStorageSync('tabList')
  },
  methods: {
    //进行页面跳转
    navTo(name) {
      if (this.componentsName!==name){
       uni.setStorageSync('componentsName',name);
       this.$emit("receiveName",name)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//导航栏设置
$isRadius:0upx; //左上右上圆角
$isWidth:100vw; //导航栏宽度
$isBorder:1px solid #eeeeee; //边框 不需要则设为0px
$isBg:white; //背景

// 选中设置
$chooseTextColor:#1b60ac; //选中时字体颜色
$chooseBgColor:white; //选中时背景颜色 transparent为透明

//未选中设置
$normalTextColor:#999; //未选中颜色

.tabBar {
  width: $isWidth;
  height: 100upx;
  position: fixed;
  bottom: 0upx;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 998;
  background-color: $isBg;
  color: $normalTextColor;
  border-left: $isBorder;
  border-top: $isBorder;
  border-right: $isBorder;
  display: flex;
  justify-content: space-around;
  border-top-right-radius: $isRadius;
  border-top-left-radius: $isRadius;
  box-sizing: border-box;
  overflow: hidden;

  .tabbar_item {
    width: 25%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.active {
      /* border-left: $isBorder;
      border-top: $isBorder; */
      background: $chooseBgColor;
      color: $chooseTextColor;
    }
  }

  image {
    width: 36upx;
    height: 36upx;
    margin-left: 5upx;
  }
}
</style>
